<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
              placeholder="请输入内容"
              v-model="state.queryObj.query"
              clearable
              @clear="getTagsData"
              :suffix-icon="Search"
              @keyup.enter.native="getTagsData"
          >
          </el-input>
        </el-col>
        <el-col :span="1.5">
          <el-button type="success" @click="getTagsData">查询</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="collect">立即采集</el-button>
        </el-col>
      </el-row>

      <el-table :data="state.tags_list" table-layout="fixed">
        <el-table-column type="index" align="center"></el-table-column>
        <el-table-column label="标签名称" prop="tag" width="100" sortable></el-table-column>
        <el-table-column label="问题总数" prop="questions" width="130" sortable></el-table-column>
        <el-table-column label="日增" prop="today_asked" width="100" sortable></el-table-column>
        <el-table-column label="周增" prop="week_asked" width="100" sortable></el-table-column>
        <el-table-column label="标签链接" prop="tag_url" width="300"></el-table-column>
        <el-table-column label="标签简介" prop="introduction"></el-table-column>
      </el-table>

      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="state.queryObj.page_num"
          layout="prev, pager, next"
          :total="state.total"
          class="mt-4"
          small
          background
      ></el-pagination>
    </el-card>
  </div>
</template>

<script setup>
import {reactive, onMounted} from 'vue'
import {getTagsInfo, tagsSpider} from "../service/tags";
import {Search} from '@element-plus/icons-vue'
import {ElMessage} from 'element-plus'


const state = reactive({
  tags_list: [],
  queryObj: {
    query: "",
    page_num: 1,
    page_size: 10
  },
  total: 0
})

// dom挂载后执行
onMounted(() => {
  getTagsData()
})

const getTagsData = async () => {
  const res = await getTagsInfo(state.queryObj)
  state.tags_list = res.data
  state.total = res.count
}

const collect = () => {
  tagsSpider()
  ElMessage.success("启动成功")
}


const handleCurrentChange = (page) => {
  state.queryObj.page_num = page;
  getTagsData()
}

</script>

<style scoped lang="less">
.el-table {
  margin-top: 15px;
  font-size: 12px;
}

.el-pagination {
  padding-top: 15px;
}
</style>